<template>
    <div>
        <div class="mt-5">
            Cookies:{{ Cookies }}
        </div>
        <div class="mt-5">
            <el-button @click="setCookie">设置 Cookie</el-button>
            <el-button @click="getCookie">获取 Cookie</el-button>
            <el-button @click="updateCookie">更新 Cookie</el-button>
            <el-button @click="deleteCookie">删除 Cookie</el-button>
        </div>
    </div>
</template>

<script setup>
let Cookies = ref("")

const setCookie = () => {
    // 设置 Cookie
    Cookies.value = { username: "张三", age: parseInt(Math.random() * 100) };
}

const getCookie = () => {
    Cookies = useCookie("user"); // 获取 Cookie
    console.log(Cookies.value)
}

const updateCookie = () => {
    const Cookies = useCookie("user"); // 获取 Cookie
    Cookies.value = { username: "李四", age: parseInt(Math.random() * 100) };
}

const deleteCookie = () => {
    const Cookies = useCookie("user");
    Cookies.value = {};
}

watchEffect(() => {
  console.log('watch')
  console.log(Cookies.value)
})

</script>